<template>
    <div class="login-wrap">
        <div class="login-con" v-if='!isMobile'>
            <div class="logo">
                <img src="../assets/img/logo.png" />
            </div>
            <div class="login-main" :class="[isMobile ? 'login-main-m':'']">
                <h2>供应商管理系统</h2>
                <el-form label-position="top" @submit.native.prevent :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="login-container">
                    <p class="title-top">欢迎登录</p>
                    <el-form-item prop="account">
                        <el-input class="login-input" prefix-icon="el-icon-user" type="text"
                                  v-model="ruleForm.account" placeholder="账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password"
                                 placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="imgCode">
                        <div class="captcha-wrap">
                            <el-input v-model="ruleForm.imgCode"
                                      placeholder="请输入验证码"></el-input>
                            <div class="captcha-icon" @click="switchCode($event)">
                                <img :src="captchaUrl" ref="img_code"/>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining" :disabled='isDisabled' class="login-btn">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="login-main login-main-m" v-else>
            <h2 style="color: #fff;">供应商管理系统</h2>
            <el-form label-position="top" @submit.native.prevent :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="login-container">
                <p class="title-top">欢迎登录</p>
                <el-form-item prop="account">
                    <el-input class="login-input" prefix-icon="el-icon-user" type="text" v-model="ruleForm.account"
                             placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password"
                             placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="imgCode">
                    <div class="captcha-wrap">
                        <el-input v-model="ruleForm.imgCode"
                                  placeholder="请输入验证码"></el-input>
                        <div class="captcha-icon" @click="switchCode($event)">
                            <img :src="captchaUrl" ref="img_code"/>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining" :disabled='isDisabled' class="login-btn">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { login } from '../api/login';
import hostUrl from '../utils/baseUrl';
import {
    systemSetting,
} from "@/api/setting.js";
export default {
    name: 'login',
    data() {
        return {
            //定义loading默认为false
            logining: false,
            isDisabled: false,
            // 记住密码
            rememberpwd: false,
            ruleForm: {
                account: '',
                password: '',
                imgCode: ''
            },
            captchaUrl: `${hostUrl}/captchaCreate?timeflag=${new Date().getTime()}`,
            //rules前端验证
            rules: {
                account: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                imgCode: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                }],
            },
            screenWidth: 0,
            isMobile: false,
            jumpPath: '',
        }
    },
    // 创建完毕状态(里面是操作)
    created() {
        const that = this;
        // this.jumpPath = this.$route.query.redirect ? this.$route.query.redirect : '/charts/statistics';
        window.addEventListener("resize", function () {
            return (() => {
                that.getScreenWidth()
            })();
        });
        that.switchCode()
        that.getScreenWidth()
        window.addEventListener('keyup' ,this.onSubmit,false)
    },
    // 里面的函数只有调用才会执行
    methods: {
        getScreenWidth() {
            this.screenWidth = document.body.clientWidth;
            if (this.screenWidth < 980) {
                this.isMobile = true;
            } else {
                this.isMobile = false;
            }
        },
        switchCode() {
            this.$nextTick(()=>{
                let imgCodeDom = this.$refs.img_code;
                console.log('imgCodeDom',imgCodeDom)
                imgCodeDom.setAttribute('src',`${this.captchaUrl}?timeflag=${new Date().getTime()}`)
            })
        },

        onSubmit(e) {
            if (e.keyCode == 13) {
                this.submitForm('ruleForm')
            }
        },
        //获取info列表
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.logining = true
                    this.isDisabled = true;
                    this.toLogin()
                }
            })
        },
        toLogin() {
            this.logining = true
            this.isDisabled = true;
            login(this.ruleForm).then(res => {
                console.log('res', res)
                if (res.code == 0) {
                    window.localStorage.setItem('Supply-Access-Token', res.data);
                    this.setMapKey()
                    this.$router.push({ path: '/charts/statistics' })
                    this.logining = false
                    this.isDisabled = false;
                } else {
                    this.logining = false
                    this.isDisabled = false;
                    this.switchCode()
                }
            })
        },
        //存贮百度地图key
        setMapKey() {
            systemSetting({
                keys: 'tencent',
            }).then((res) => {
                this.showPage = true;
                if (res.code == 0) {
                    this.$store.commit("SET_BAIDU_MAP_KEY", res.data.values.map_customer_key);
                }
            });
        },
    }
}
</script>

<style scoped>
.login-wrap {
    width: 100%;
    height: 100%;
    background: url(../assets/img/login-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.login-con {
    width: 980px;
    height: 505px;
    background: url(../assets/img/login.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 15px; */
}
.logo {
    width: 130px;
    height: 45px;
    position: absolute;
    left: 20px;
    top: 20px;
}
.logo img {
    width: 100%;
    height: 100%;
}
.title-top {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22px;
    color: #000b1c;
    padding-top: 26px;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}
/deep/ .el-form-item__label {
    line-height: 10px;
}
/deep/ .el-form-item {
    margin-bottom: 26px;
}
/deep/ .el-input__icon {
    color: #606266;
    font-size: 20px;
}
.login-main {
    width: 384px;
    height: 100%;
    position: absolute;
    right: 6px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-main-m {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.login-main h2 {
    font-size: 24px;
    padding-bottom: 22px;
    font-weight: normal;
}

.login-container {
    width: 320px;
    height: 381px;
    padding: 0 30px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 5px 10px 1px rgba(29, 181, 153, 0.15);
    border-radius: 8px;
}
/deep/ .el-input__inner {
    height: 40px;
    background: #f5f7fa;
    border: 0;
}

.captcha-wrap {
    display: flex;
}
.captcha-icon {
    width: 120px;
    height: 40px;
    margin-left: 10px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}
.captcha-icon img {
    width: 100%;
    height: 100%;
}

.title {
    font-size: 30px;
    color: #000b1c;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 20px;
}
.title span {
    font-size: 20px;
}

.remember {
    margin: 0px 0px 35px 0px;
}

.code-box {
    text-align: right;
}

.codeimg {
    height: 40px;
}
.btn {
    width: 100%;
    margin-top: 50px;
}
.login-btn{
    background: #1DB599;
    border-color: #1DB599;
}
.login-btn.is-disabled{
    background-color: rgba(29,181,153,0.4);
    border-color: rgba(29,181,153,0);
}
</style>